<template>
  <div class="data-monitor-wrapper">
    <div class="data-part data-collection">
      <!-- 数据采集 -->
      <div class="data-header">数据采集</div>
      <div class="data-content collection-content">
        <div class="collection-part collection-left">
          <div class="collection-header">降水预报格点数据文件</div>
          <datagrid
            :data-list="rainDataList"
            :columns="dataColumns"
            :total="rainTotal"
            :current-page="rainCurrPage"
            :page-sizes="[5, 10, 20]"
            :page-size="rainPageSize"
            :show-index="false"
            :loading="dataLoading"
            @handle-size-change="
              (val) => {
                handleSizeChange('rain', val);
              }
            "
            @handle-current-change="
              (val) => {
                handleCurrentChange('rain', val);
              }
            "
          >
            <el-table-column
              align="center"
              label="缺失"
              prop="defect"
              slot="defect"
              :formatter="formatDefect"
            >
            </el-table-column>
          </datagrid>
        </div>
        <div class="collection-part collection-right">
          <div class="collection-header">站点实况数据文件</div>
          <datagrid
            :data-list="siteDataList"
            :columns="dataColumns"
            :total="siteTotal"
            :current-page="siteCurrPage"
            :page-sizes="[5, 10, 20]"
            :page-size="sitePageSize"
            :show-index="false"
            :loading="dataLoading"
            @handle-size-change="
              (val) => {
                handleSizeChange('site', val);
              }
            "
            @handle-current-change="
              (val) => {
                handleCurrentChange('site', val);
              }
            "
          >
            <el-table-column
              align="center"
              label="缺失"
              prop="defect"
              slot="defect"
              :formatter="formatDefect"
            >
            </el-table-column>
          </datagrid>
        </div>
      </div>
    </div>
    <div class="data-part interface-status">
      <!-- 接口状态监控 -->
      <div class="data-header">接口状态监控</div>
      <div class="data-content interface-content">
        <datagrid
          :data-list="itfDataList"
          :columns="itfColumns"
          :total="itfTotal"
          :current-page="itfCurrPage"
          :page-sizes="[5, 10, 20]"
          :page-size="itfPageSize"
          :show-index="false"
          :loading="itfLoading"
          @handle-size-change="
            (val) => {
              handleSizeChange('itf', val);
            }
          "
          @handle-current-change="
            (val) => {
              handleCurrentChange('itf', val);
            }
          "
        >
          <el-table-column
            align="center"
            label="状态"
            prop="state"
            slot="state"
          >
            <template slot-scope="scope">
              <!-- 0表示正常 1表示异常 -->
              <div
                class="interface-icon interface-normal"
                v-if="scope.row.state === 0"
              >
                <i class="el-icon-success"></i>
              </div>
              <div
                class="interface-icon interface-abnormal"
                v-if="scope.row.state === 1"
              >
                <i class="el-icon-warning"></i>
              </div>
            </template>
          </el-table-column>
        </datagrid>
      </div>
    </div>
  </div>
</template>

<script>
import Datagrid from '@/components/Datagrid'
import { getAction } from '@/api/action';

export default {
  name: 'DataMonitor',
  components: { Datagrid },
  data() {
    return {
      urls: {
        collection: '/api/acquisitionMonitoring/list', // 查询所有数据采集
        interface: '/api/interfaceMonitoring/list', // 查询所有接口状态
      },
      rainCurrPage: 1,
      rainPageSize: 5,
      rainTotal: 0,
      rainDataList: [],
      siteCurrPage: 1,
      sitePageSize: 5,
      siteTotal: 0,
      dataColumns: [
        {
          label: '类型',
          prop: 'type'
        }, {
          label: '文件名',
          prop: 'fileName'
        }, {
          label: '缺失',
          prop: 'defect',
          slot: true,
        }, {
          label: '到达时间',
          prop: 'dateTime'
        },
        {
          label: '描述',
          prop: 'description',
          width: '300',
        }
      ],
      dataLoading: false,
      siteDataList: [],
      itfCurrPage: 1,
      itfPageSize: 5,
      itfTotal: 0,
      itfDataList: [],
      itfColumns: [
        {
          label: '接口名称',
          prop: 'interfaceName'
        }, {
          label: '接口数量',
          prop: 'interfaceNum'
        },
        {
          label: '状态',
          prop: 'state',
          slot: true,
        }, // 0表示正常 1表示异常
        // {
        //   label: '操作时间',
        //   prop: 'executionTime'
        // },
        {
          label: '描述',
          prop: 'description',
        }
      ],
      itfDataList: [],
      itfLoading: false,
    }
  },
  created() { this.init() },
  methods: {
    init() {
      this.getCollectionData();
      this.getInterfaceData();
    },
    // 查询所有数据采集
    async getCollectionData() {
      this.dataLoading = true;
      await getAction(this.urls.collection).then(res => {
        console.log('数据采集', res);
        this.rainDataList = [];
        this.rainTotal = 0;
        if (res.msg === "成功" && res.objects) {
          res.objects.map(item => {
            // 0：降水预报站点数据文件，1：站点实况数据文件
            if (item.remake === '0') {
              this.rainDataList.push(item);
              this.rainTotal++;
            }
            if (item.remake === '1') {
              this.siteDataList.push(item);
              this.siteTotal++;
            }
          })
        }
      });
      this.dataLoading = false;
    },
    // 查询所有接口状态
    async getInterfaceData() {
      this.itfLoading = true;
      await getAction(this.urls.interface).then(res => {
        console.log('接口状态', res);
        this.itfDataList = [];
        this.itfTotal = 0;
        if (res.msg === "成功" && res.objects) {
          this.itfDataList = res.objects;
          this.itfTotal = res.objects.length;
        }
      });
      this.itfLoading = false;
    },

    handleSizeChange(type, val) {
      this[type + 'PageSize'] = val;
    },
    handleCurrentChange(type, val) {
      console.log(this[type + 'CurrPage'], val);
      this[type + 'CurrPage'] = val;
    },

    formatDefect(row, column, cell) {
      //   console.log(row, column.property, cell);
      // 0：是  1：否
      return row[column.property] ? '是' : '否';
    },
  }
}
</script>

<style lang="scss">
.data-monitor-wrapper {
  padding-top: 10px;
  padding-left: 10px;
  height: 100%;
  background-color: #e7e7e7;
  .data-part {
    height: 50%;
    background-color: rgb(254, 254, 254);
    font-family: "SourceHanSansCN";
    font-size: 14px;
    .data-header {
      padding: 0 1em;
      height: 45px;
      line-height: 45px;
      color: rgb(102, 102, 102);
      border-left: 4px solid rgb(51, 133, 255);
      background-color: #ebeff5;
    }
    .data-content {
      padding: 1em;
      height: calc(100% - 45px);
      .collection-part {
        .collection-header {
          text-align: center;
          color: rgb(51, 133, 255);
        }
      }
      .datagrid-table-wrapper {
        height: 100%;
      }
      &.collection-content {
        display: flex;
        .collection-part {
          flex: 1;
          width: 50%;
        }
        .datagrid-table {
          max-height: calc(100% - 20px) !important;
        }
      }
      &.interface-content {
        .interface-icon {
          display: inline-block;
          padding: 1px;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          &.interface-normal {
            color: #3dcd58;
            border: 1px solid #3dcd58;
          }
          &.interface-abnormal {
            color: #fa4a33;
            border: 1px solid #fa4a33;
          }
          i {
            font-size: 20px;
          }
        }
      }
    }
  }
  .data-collection {
    height: 40%;
    margin-bottom: 10px;
  }
  .interface-status {
      height: 60%;
  }
}
</style>
